// #region 生成通用 margin, padding 样式
/**
 * 间距数值=[0, 30], 公差=5, 最后生成样式如下:
 * .mg-0 { margin: 0rpx; }
 * .pd-0 { margin: 0rpx; }
 * .mgt-0 { margin-top: 0rpx; }
 * .mgr-0 { margin-right: 0rpx; }
 * .mgb-0 { margin-bottom: 0rpx; }
 * .mgl-0 { margin-left: 0rpx; }
 * .pdt-0 { padding-top: 0rpx; }
 * .pdr-0 { padding-right: 0rpx; }
 * .pdb-0 { padding-bottom: 0rpx; }
 * .pdl-0 { padding-left: 0rpx; }
 */
$num: 0;
@while $num <= 30 {
  $type: (
    mg: margin,
    pd: padding
  );
  $positions: (
    t: top,
    r: right,
    b: bottom,
    l: left
  );

  @each $type_key, $type_value in $type {
    .#{$type_key}-#{$num} {
      #{$type_value}: #{$num}rpx;
    }
    @each $position_key, $position_value in $positions {
      .#{$type_key}#{$position_key}-#{$num} {
        #{$type_value}-#{$position_value}: #{$num}rpx;
      }
    }
  }

  $num: $num + 5;
}
// #endregion

// #region 文字超出隐藏
.text-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-hidden-2 {
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
// #endregion

// #region 安全区域样式
.safe-area {
  box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// #endregion

// #region 清除浮动
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}
// #endregion

.block {
  display: block;
}
